
const path=require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const cssRegex = /\.css$/;
const sassRegex = /\.(scss|sass)$/;
const lessRegex = /\.less$/;
const stylRegex = /\.styl$/;
const styleLoadersArray = [
    'style-loader',
    {
        loader: 'css-loader',
        options: {
            modules: true
        }
    }
];
module.exports={
    entry:"./src/main.js",     //入口配置
    output: {
        filename: 'bundle.js', //出口文件名
        publicPath:"./"
    },
    plugins:[
        new HtmlWebpackPlugin({template: "./src/template.html"}),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: "./src/assets/public",
                    to: "assets/public",

                }
            ]
        })
    ],
    module: {
        rules:[
            {
                test: /\.js$/,//使用正则匹配所有需要使用babel-loader的文件
                use:{
                    loader: "babel-loader",//指明要使用的loader
                    options: {//传入loader的参数
                        presets:[
                            "@babel/preset-react",
                            ["@babel/preset-env",
                                {
                                    "targets": {   //指定需要兼容的浏览器类型和版本
                                        "browsers": [
                                            "> 1%",     //支持市场份额超过1％的浏览器。
                                            "ie >= 9"   //支持IE9以上的版本
                                        ]
                                    }
                                }

                            ],

                        ],
                        plugins: [
                            "@babel/plugin-proposal-object-rest-spread", //解析对象的扩展运算符（ES2018）
                            "@babel/plugin-proposal-export-default-from",  //解析额外的export语法:export v from "xx/xx"
                            "@babel/plugin-proposal-export-namespace-from", //解析额外的export语法:export v as vv from "xx/xx";
                            "@babel/plugin-proposal-class-properties",   //解析class中的静态属性
                            "@babel/plugin-syntax-dynamic-import"         //解析import方法
                        ]
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: "css-loader",
                        options: {
                            esModule: true,
                            modules: {
                                namedExport: false,
                                exportLocalsConvention: 'camelCase', // 可选：类名转 camelCase
                                localIdentName: "foo__[name]__[local]",
                            },
                        },
                    },
                ],
            },
            {
                test:/\.less$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            modules: {
                                namedExport: false,
                                exportLocalsConvention: "camelCase",
                                localIdentName: "[name]__[local]--[hash:base64:5]",
                            },
                        },
                    },
                    "less-loader",
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1024 * 30,         //30KB 以下的文件采用 url-loader
                        fallback: 'file-loader',  //否则采用 file-loader，默认值就是 file-loader
                        outputPath: 'images',     //图片输出路径，相对于output.path
                    }
                }]
            },
            {
                test: /\.(eot|ttf|woff|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1024 * 30,         //30KB 以下的文件采用 url-loader
                        fallback: 'file-loader',  //否则采用 file-loader，默认值就是 file-loader
                        outputPath: 'fonts',      //字体输出路径
                    }
                }]
            },

        ]
    }
}
